package ;
import easelhx.display.SpriteSheet;
import easelhx.js.Image;
import easelhx.utils.SpriteSheetUtils;
import js.JQuery;
import js.Lib;

/**
 * ...
 * @author 
 */

class SpriteSheetFlipExample extends Example
{
	private var imgSeq:Image; //bmp of the sprite sheet
	private var imageSrc:String;
	private var results:Dynamic; //frame data to be displayed

	public function new() 
	{
		super();
	}
	
	override public function run():Void 
	{
		super.run();
		
		imgSeq = new Image();		
		imageSrc = "assets/runningGrantSmall.png";
		
		new JQuery("body").prepend('<div class="content"><div id="content" style="margin-top: 90px; margin-left: 70px; font-weight: bold;">Original sprite sheet<br/><br/><img id="origImage"><br/><br/><br/>Appended sprites<br/><br/></div></div>');
		
		untyped document.getElementById('origImage').src = imageSrc;
		
		//wait for the image to load
		imgSeq.onload = handleImageLoad;
		imgSeq.src = imageSrc;
	}
	
	private function handleImageLoad() : Void
	{
		// create a new sprite sheet from the loaded image, and define the animation sequences in it.
		// for example, {walkUpRight:[0,19]} defines an animation sequence called "walkUpRight" that
		// will play back frames 0 to 19 inclusive.
		var spriteSheet : SpriteSheet  = new SpriteSheet(
				{"animations":
					{
					"run": [0, 15]},
					"images": ["assets/runningGrantSmall.png"],
					"frames":
					{
						"regX": 0,
						"regY": 0,
						"width": 51,
						"height": 90,
						"count": 16
					}
				}
		);

		// append flipped frames to the sprite sheet. The 2nd, 3rd, and 4th params indicate whether
		// to add horizontal, vertical, and both horizontally & vertically flipped frames.
		SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false);

		// add the newly created sprite sheet to the bottom of this document. We're accessing a private property "_images"
		// for demonstration purposes only.
		Lib.document.getElementById("content").appendChild(Reflect.field(spriteSheet, "_images")[1]);
	}
	
}